<template>
  <div class="bigBox">
    <!-- 顶部导航栏 -->
    <nav class="topnav navbar navbar-expand-lg navbar-dark fixed-top" style="padding:0px;margin:0px;">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <a class="navbar-brand" href="#" style="padding: 0px 0px">
            <router-link to="/">
              <img alt="Brand" :src="imgs.bow" style="width: 40px;margin:5px;">
            </router-link>
          </a>
          <a class="navbar-brand" ><router-link to="/" class="back">返回首页</router-link></a>
        </div>
      </div><!-- /.container-fluid -->
    </nav>
    <!-- 最外层的大盒子 -->
    <div class="box">
      <!-- 滑动盒子 -->
      <div class="pre-box" id="preRef">
        <h1>WELCOME</h1>
        <p>JOIN US!</p>
        <div class="img-box">
          <img v-bind:src="flag===true?imgs.img1:imgs.img2" alt="">
        </div>
      </div>
      <!-- 注册盒子 -->
      <div class="register-form">
        <!-- 标题盒子 -->
        <div class="title-box">
          <h1>注册</h1>
        </div>
        <!-- 输入框盒子 -->
        <div class="input-box">
          <form>
            <div class="form-group">
              <label for="exampleInputIdentity1">身份：</label>
              <select id="exampleInputIdentity1" class="form-control form-control-placeholder" v-model="registerInfo.identity" @change="selectChange_register($event)">
                <option value="-1" disabled selected hidden>请选择</option>
                <option value="0" style="color: black;">学生</option>
                <option value="2" style="color: black;">老师</option>
                <option value="1" style="color: black;">已毕业的学长学姐</option>
              </select>
            </div>
            <div class="form-group">
              <label for="exampleInputName">用户名</label>
              <input type="text" class="form-control" id="exampleInputName" aria-describedby="usernamelHelp" v-model="registerInfo.username">
            </div>
            <div class="form-group">
              <label for="exampleInputEmail2">手机号</label>
              <input type="phone" class="form-control" id="exampleInputEmail2" aria-describedby="emailHelp" v-model="registerInfo.phone">
            </div>
            <div class="form-group">
              <label for="exampleInputPassword2">密码</label>
              <input type="password" class="form-control" id="exampleInputPassword2" aria-describedby="pwdHelp" v-model="registerInfo.pwd">
              <small id="pwdHelp" class="form-text text-muted">（密码至少包含数字和英文，长度6-20）</small>
            </div>
            <div class="form-group">
              <label for="exampleInputPassword2">确认密码</label>
              <input type="password" class="form-control" id="exampleInputPassword3" v-model="registerInfo.pwdAgain">
            </div>
          </form>
        </div>
        <!-- 按钮盒子 -->
        <div class="btn-box">
          <button @click="register()">注册</button>
          <!-- 绑定点击事件 -->
          <p @click="mySwitch()">已有账号?去登录</p>
        </div>
      </div>
      <!-- 登录盒子 -->
      <div class="login-form">
        <!-- 标题盒子 -->
        <div class="title-box">
          <h1>登录</h1>
        </div>
        <!-- 输入框盒子 -->
        <div class="input-box" :model="loginInfo" >
          <form>
            <div class="form-group">
              <label for="exampleInputPhone">手机号：</label>
              <input class="form-control" id="exampleInputPhone" aria-describedby="phoneHelp" v-model="loginInfo.accountNumber">
            </div>
            <div class="form-group">
              <label for="exampleInputPassword">密码：</label>
              <input type="password" class="form-control" id="exampleInputPassword" v-model="loginInfo.pwd">
            </div>
            <div class="form-group">
              <label for="exampleInputIdentity">身份：</label>
              <select id="exampleInputIdentity" class="form-control form-control-placeholder" v-model="loginInfo.identity" @change="selectChange_login($event)">
                <option value="-1" disabled selected hidden>请选择</option>
                <option value="0" style="color: black;">学生</option>
                <option value="1" style="color: black;">已毕业的学长学姐</option>
                <option value="2" style="color: black;">老师</option>
              </select>
            </div>
            <div class="big" >
              <div class="bg"></div>
              <div class="text">{{confirmWords}}</div>
              <div @mousedown="mousedownFn($event)" class="hand handler"></div>
            </div>
          </form>
        </div>
        <!-- 按钮盒子 -->
        <div class="btn-box">
          <button @click="login()">登录</button>
          <!-- 绑定点击事件 -->
          <p @click="mySwitch()">没有账号?去注册</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import img1 from "@/assets/login2.gif"
import img2 from "@/assets/login1.jpg"
import bow from "@/assets/register/bow.png"
import Cookies from 'js-cookie'
import {register,userLogin} from "@/api/User";
import websocket from "@/utils/websocket";


export default {
  name: "register",
  data(){
    return {
      flag:true,
      preRef:'',
      imgs:{
        img1,
        img2,
        bow
      },
      loginInfo:{
        accountNumber:'',
        pwd:'',
        identity:-1,
        score:0
      },
      registerInfo:{
        phone:'',
        pwd:'',
        pwdAgain:'',
        identity:-1,
        username:''
      },
    //  滑动验证
      beginClientX: 0,
      mouseMoveStata: false,
      maxwidth:310,
      confirmWords: '拖动滑块验证',
      /*滑块文字*/
      confirmSuccess: false, /*是否成功*/





    }
  },
  created() {
  },
  methods: {
    mousedownFn: function(e) {
      this.mouseMoveStata = true;
      this.beginClientX = e.clientX;
    },
    //按下滑块
    successFunction() {
      $(".hand").removeClass('handler').addClass('handlerFinish');
      this.confirmWords = '验证通过'
      $(".big").css({
        'color': '#fff'
      });
      $(".big").css({
        'background-color': '#13CE66'
      });
      $(".hand").css({
        'left': this.maxwidth
      });
      $(".bg").css({
        'width': this.maxwidth
      });
      $('body').unbind('mousemove');
      $('body').unbind('mouseup');
      this.confirmSuccess = true;
      //判断是否成功
    },
    selectChange_login(event){
      this.loginInfo.identity=event.target.value;
    },
    selectChange_register(event){
      this.registerInfo.identity=event.target.value;
    },
    resetRegisterInfo(){
      this.registerInfo.phone='';
      this.registerInfo.pwd='';
      this.registerInfo.pwdAgain='';
      this.registerInfo.username='';
    },
    //注册
    async register(){
      var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;   //合法的手机号
      var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/; //密码至少包含 数字和英文，长度6-20
      if(this.registerInfo.identity === -1)
      {
        this.$msg.warning('请选择身份！')
      }
      else if(this.registerInfo.username<=0)
      {
        this.$msg.warning('请输入用户名！')
      }
      else if(this.registerInfo.phone<=0)
      {
        this.$msg.warning('请输入手机号！')
      }
      else if(!myreg.test(this.registerInfo.phone))
      {
        this.$msg.warning('手机号不合法，请重新输入！')
      }
      else if(this.registerInfo.pwd<=0)
      {
        this.$msg.warning('请输入密码！')
      }
      else if(!reg.test(this.registerInfo.pwd))
      {
        this.$msg.warning('密码至少包含数字和英文，长度为6-20！')
      }
      else if(this.registerInfo.pwdAgain<=0)
      {
        this.$msg.warning('请再次输入密码！')
      }
      else if(this.registerInfo.pwd!==this.registerInfo.pwdAgain)
      {
        this.$msg.warning('两次输入的密码不一致，请重新输入！')
      }
      else
      {
        //连接后端传数据
        register({
          phone:this.registerInfo.phone,
          pwd:this.registerInfo.pwd,
          identity:this.registerInfo.identity,
          username:this.registerInfo.username
        }).then(res=> {
          if(res.data.result===1){
            this.$msg.success('注册成功，请登录！')
            this.resetRegisterInfo();   //清空输入框
            this.mySwitch();
          }
          else if(res.data.result === -1){
            this.$msg.error('手机号已存在，请勿重复注册！')
            this.resetRegisterInfo();    //清空输入框
          }
          else if(res.data.result === 0){
            this.$msg.error('用户名已存在，请勿重复！')
            this.registerInfo.username='';
          }
        });

      }
    },
    //登录
    login()
    {
      if(this.loginInfo.accountNumber.length<=0)
      {
        this.$msg.warning('请输入手机号！');
      }
      else if(this.loginInfo.pwd.length<=0)
      {
        this.$msg.warning('请输入密码！')
      }
      else if(this.loginInfo.identity === -1)
      {
        this.$msg.warning('请选择身份！')
      }
      else if(this.confirmSuccess === false)
      {
        this.$msg.warning('请拖动滑块验证！')
      }
      else
      {
        //连接后端传数据
        userLogin({
          accountNumber:this.loginInfo.accountNumber,
          pwd:this.loginInfo.pwd,
          identity:this.loginInfo.identity
        }).then(res=> {
          //登录成功以后  提示信息 message组件
          if(res.data.code===1)  //已完成身份审核
          {
            this.$msg.success(res.data.msg);
            //存入session 保存token
            window.sessionStorage.setItem('token',res.data.token);
            // 保存用户名
            Cookies.set('currentUserName',res.data.username);
            // //保存身份
            // window.sessionStorage.setItem('currentIdentity',this.loginInfo.identity);
            // //保存身份认证情况
            // window.sessionStorage.setItem('check',res.check);
            //跳转到后台首页面
            this.$router.push('/');

            websocket.Init();  //开启连接服务器

          }
          else if(res.data.code===-1){   //未完成身份审核
            this.$msg.success(res.data.msg);
            //存入session
            window.sessionStorage.setItem('token',res.data.token);
            // 保存用户名
            Cookies.set('currentUserName',res.data.username);
            //跳转到个人页面，请用户完成身份认证
            this.$router.push({path:'/Personal_Info/Person_Identity'});

           // websocket.Init();  //开启连接服务器
          }
          else   //登陆失败
          {
            this.$msg.error(res.data.msg);
          }
        });

      }
    },
    //切换登陆注册样式
    mySwitch(){
      this.preRef=document.getElementById('preRef');
      if(this.flag){
        this.preRef.style.background='#c9e0ed';
        this.preRef.style.transform='translateX(100%)';
      }
      else
      {
        this.preRef.style.background='#edd4dc';
        this.preRef.style.transform='translateX(0%)';
      }
      this.flag=!this.flag;
    }
  },
  mounted() {
    $('body').on('mousemove', (e) => {
      //拖动使用箭头指向Vue函数
      if(this.mouseMoveStata) {
        var width = e.clientX - this.beginClientX;
        if(width > 0 && width <= this.maxwidth) {
          $(".hand").css({
            'left': width
          });
          $(".bg").css({
            'width': width
          });
        } else if(width > this.maxwidth) {
          this.successFunction();
        }
      }
    });
    $('body').on('mouseup', (e) => {
      //鼠标放开
      this.mouseMoveStata = false;
      var width = e.clientX - this.beginClientX;
      if(width < this.maxwidth) {
        $(".hand").css({
          'left': 0
        });
        $(".bg").css({
          'width': 0
        });
      }
    })
  }
}
</script>

<style scoped>
* {
  /* 去除浏览器默认内外边距 */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 去除input的轮廓 */
input {
  outline: none;
}

.bigBox{
  height: 100vh;
  /* 溢出隐藏 */
  overflow-x: hidden;
  display: flex;
  /* 渐变方向从左到右 */
  background: linear-gradient(to right, rgb(247, 209, 215), rgb(191, 227, 241));
}

span {
  position: absolute;
  z-index: 0;
  bottom: 0;
  border-radius: 50%;
  /* 径向渐变 */
  background: radial-gradient(circle at 72% 28%, #fff 3px, #ff7edf 8%, #5b5b5b, #aad7f9 100%);
  /* 泡泡内阴影 */
  box-shadow: inset 0 0 6px #fff,
  inset 3px 0 6px #eaf5fc,
  inset 2px -2px 10px #efcde6,
  inset 0 0 60px #f9f6de,
  0 0 20px #fff;
  /* 动画 */
  animation: myMove 4s linear infinite;
}


@keyframes myMove {
  0% {
    transform: translateY(0%);
    opacity: 1;
  }

  50% {
    transform: translate(10%, -1000%);
  }

  75% {
    transform: translate(-20%, -1200%);
  }

  99% {
    opacity: .9;
  }

  100% {
    transform: translateY(-1800%) scale(1.5);
    opacity: 0;
  }
}

/* 最外层的大盒子 */
.box {
  width: 1050px;
  height: 600px;
  display: flex;
  /* 相对定位 */
  position: relative;
  z-index: 2;
  margin: auto;
  /* 设置圆角 */
  border-radius: 8px;
  /* 设置边框 */
  border: 1px solid rgba(255, 255, 255, .6);
  /* 设置盒子阴影 */
  box-shadow: 2px 1px 19px rgba(0, 0, 0, .1);
}

/* 滑动的盒子 */
.pre-box {
  /* 宽度为大盒子的一半 */
  width: 50%;
  /* width: var(--width); */
  height: 100%;
  /* 绝对定位 */
  position: absolute;
  /* 距离大盒子左侧为0 */
  left: 0;
  /* 距离大盒子顶部为0 */
  top: 0;
  z-index: 99;
  border-radius: 4px;
  background-color: #edd4dc;
  box-shadow: 2px 1px 19px rgba(0, 0, 0, .1);
  /* 动画过渡，先加速再减速 */
  transition: 0.5s ease-in-out;
}

/* 滑动盒子的标题 */
.pre-box h1 {
  margin-top: 150px;
  text-align: center;
  /* 文字间距 */
  letter-spacing: 5px;
  color: white;
  /* 禁止选中 */
  user-select: none;
  /* 文字阴影 */
  text-shadow: 4px 4px 3px rgba(0, 0, 0, .1);
}

/* 滑动盒子的文字 */
.pre-box p {
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 20px 0;
  /* 禁止选中 */
  user-select: none;
  font-weight: bold;
  color: white;
  text-shadow: 4px 4px 3px rgba(0, 0, 0, .1);
}

/* 图片盒子 */
.img-box {
  width: 200px;
  height: 200px;
  margin: 20px auto;
  /* 设置为圆形 */
  border-radius: 50%;
  /* 设置用户禁止选中 */
  user-select: none;
  overflow: hidden;
  box-shadow: 4px 4px 3px rgba(0, 0, 0, .1);
}

/* 图片 */
.img-box img {
  width: 100%;
  transition: 0.5s;
}

/* 登录和注册盒子 */
.login-form,
.register-form {
  flex: 1;
  height: 100%;
}

/* 标题盒子 */
.title-box {
  height: 150px;
  line-height: 500px;
  padding-top: 50px;
}

/* 标题 */
.title-box h1 {
  text-align: center;
  color: white;
  /* 禁止选中 */
  user-select: none;
  letter-spacing: 5px;
  text-shadow: 4px 4px 3px rgba(0, 0, 0, .1);

}

/* 输入框盒子 */
.input-box {
  margin-top: -45px;
  display: flex;
  /* 纵向布局 */
  flex-direction: column;
  /* 水平居中 */
  align-items: center;
}

/* 输入框 */
input{
  width: 100%;
  height: 40px;
  margin-bottom: 15px;
  text-indent: 10px;
  border: 1px solid #fff;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 120px;
  /* 增加磨砂质感 */
  backdrop-filter: blur(10px);
}
/*输入框*/
#exampleInputIdentity{
  width: 100%;
  height: 40px;
  margin-bottom: 20px;
  text-indent: 10px;
  border: 1px solid #fff;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 120px;
  /* 增加磨砂质感 */
  backdrop-filter: blur(10px);
}
#exampleInputIdentity1
{
  width: 100%;
  height: 40px;
  margin-bottom: 20px;
  text-indent: 10px;
  border: 1px solid #fff;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 120px;
  /* 增加磨砂质感 */
  backdrop-filter: blur(10px);
}

/* 输入框前面的文字 */
label
{

}

input:focus {
  /* 光标颜色 */
  color: #b0cfe9;

}

/* 聚焦时隐藏文字 */
input:focus::placeholder {
  opacity: 0;
}

/* 按钮盒子 */
.btn-box {
  display: flex;
  justify-content: center;
}

/* 按钮 */
button {
  width: 100px;
  height: 30px;
  margin: 0 7px;
  line-height: 30px;
  border: none;
  border-radius: 4px;
  background-color: #69b3f0;
  color: white;
}

/* 按钮悬停时 */
button:hover {
  /* 鼠标小手 */
  cursor: pointer;
  /* 透明度 */
  opacity: .8;
}

/* 按钮文字 */
.btn-box p {
  height: 30px;
  line-height: 30px;
  /* 禁止选中 */
  user-select: none;
  font-size: 15px;

}

.btn-box p:hover {
  cursor: pointer;
  border-bottom: 1px solid white;
}
/*滑动验证*/
.big {
  border-radius:30px;
  position: relative;
  background-color: #c2b5cc;
  width: 350px;
  height: 40px;
  margin-bottom: 50px;
  line-height: 34px;
  text-align: center;
}

.hand {
  border-radius:30px;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  cursor: move;
}


.handler {
  background: #fff url("") no-repeat center;
}

.handlerFinish {
  background: #fff url("") no-repeat center;
}

.bg {
  border-radius:30px;
  background-color: #13CE66;
  height: 40px;
  width: 0px;
}

.text {
  position: absolute;
  top: 0px;
  width: 300px;
  font-size: 18px;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
}
</style>
